<template>
  <div class="detailbox">
    <el-row type="flex" :gutter="15">
      <el-col :span="17">
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/post' }">旅游攻略</el-breadcrumb-item>
          <el-breadcrumb-item>攻略详情</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 文章详情 -->
        <div class="detailData" v-if="textData">
          <!-- 标题 -->
          <h1>{{textData.title}}</h1>
          <!-- 时间 -->
          <div class="date">
            <span>
              攻略:
              <i>{{date}}</i>
              阅读:
              <i>{{textData.watch}}</i>
            </span>
          </div>
          <!-- 文章内容 -->
          <div v-html="textData.content" class="contentbox"></div>
        </div>

        <!-- 分享 -->
        <div class="icon">
          <el-row type="flex" justify="center">
            <el-col :span="3">
              <i class="iconfont iconpinglun"></i>
              <div class="icon-text">评论({{total}})</div>
            </el-col>
            <el-col :span="2">
              <i class="iconfont iconfenxiang"></i>
              <div class="icon-text">分享</div>
            </el-col>
          </el-row>
        </div>

        <!-- 写评论 -->
        <div class="pinlunbox">
          <div class="pinlun">评论</div>
          <div class="nicknamebox" v-if="this.nickname">
            <span class="namebox">
              回复 @{{this.nickname}}
              <i class="el-tag__close el-icon-close" @click="delhuifu"></i>
            </span>
          </div>
          <!-- 文本框 -->
          <el-popover
            placement="top"
            title="是否去登陆!"
            width="200"
            trigger="manual"
            v-model="isshowinout"
          >
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="isshowinout = false">取消</el-button>
              <el-button
                type="primary"
                size="mini"
                @click="$router.push('/user/login?wzid='+$route.query.id)"
              >确定</el-button>
            </div>
          </el-popover>
          <el-input
            slot="reference"
            ref="textinpu"
            type="textarea"
            :placeholder="isshowinout?'情先登陆':'说点什么吧..'"
            v-model="textarea"
            resize="none"
            @focus="istoken"
            :disabled="isshowinout"
          ></el-input>

          <!-- <el-input
            ref="textinpu"
            type="textarea"
            :placeholder="isshowinout?'情先登陆':'说点什么吧..'"
            v-model="textarea"
            resize="none"
            @focus="istoken"
            :disabled="isshowinout"
          ></el-input>-->

          <!-- 上传文件 -->
          <div class="shanchuan">
            <!-- 文件 -->
            <div class="wenjian">
              <el-upload
                ref="upload"
                class="shanchuanimg"
                :action="$axios.defaults.baseURL + '/upload'"
                list-type="picture-card"
                :on-success="chengong"
                name="files"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
            <!-- 提交按钮 -->
            <div class="tijiao">
              <el-button type="primary" @click="tijiaobut">提交</el-button>
            </div>
          </div>
        </div>
        <!-- 评论 -->
        <div class="pLlist">
          <commdata
            v-for="(item,index) in commdatas"
            :key="index"
            :commdata="item"
            @getPLId="getPLId(arguments)"
          />
        </div>

        <!-- 分页 -->
        <div class="fenye">
          <el-pagination
            layout="total,sizes,prev, pager, next,jumper"
            :page-sizes="[3,5,10]"
            :page-size="pageSize"
            :total="this.total"
            @current-change="dianji"
            @size-change="newpageS"
            class="fengye"
          ></el-pagination>
          <!-- :current-page.sync="page1" -->
        </div>
      </el-col>

      <el-col :span="7" class="gonlue">
        <h4>相关攻略</h4>
        <gonluechebian v-for="(item,index) in xianguanData" :key="index" :xgData="item" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
var moment = require("moment");

import commdata from "@/components/post/commdata";
import gonluechebian from "~/components/post/gonluechebian";
export default {
  components: {
    commdata,
    gonluechebian,
  },

  data() {
    return {
      textData: {},
      date: "",
      // 发表评论的图片
      pics: [],
      // 发表评论的内容
      textarea: "",
      // 评论数据
      commdatas: [],
      // 回复的id
      followid: "",
      // 回复的名字
      nickname: "",
      // 总条数
      total: 0,
      // 评论数
      pageSize: 5,
      // 页码
      pageIndex: 1,
      // 相关攻略数据
      xianguanData: [],
      // 禁用输入框
      isshowinout: false,
    };
  },
  watch: {
    $route() {
      this.$axios({
        url: "posts",
        params: {
          id: this.$route.query.id,
        },
      }).then((res) => {
        console.log(res.data);

        this.getpinlun();

        this.textData = res.data.data[0];
        this.date = moment(res.data.data[0].created_at).format(
          "YYYY-MM-DD  h:mm"
        );
      });
    },
  },
  created() {
    this.$axios({
      url: "posts",
      params: {
        id: this.$route.query.id,
      },
    }).then((res) => {
      console.log(res.data);
      this.textData = res.data.data[0];
      this.date = moment(res.data.data[0].created_at).format(
        "YYYY-MM-DD  h:mm"
      );
    });

    // 页面进来加载评论
    this.getpinlun();

    // 获取相关攻略的数据
    this.$axios({
      url: "posts/recommend",
    }).then((res) => {
      console.log("获取相关攻略的数据", res.data);
      this.xianguanData = res.data.data;
      console.log(this.xianguanData);
    });
  },

  methods: {
    // 获取评论数据封装
    getpinlun() {
      this.$axios({
        url: "/posts/comments",
        params: {
          post: this.$route.query.id,
          _start: (this.pageIndex - 1) * this.pageSize,
          _limit: this.pageSize,
        },
      }).then((res) => {
        this.commdatas = res.data.data;
        this.total = res.data.total;
        console.log("评论数据", res.data);
      });
    },
    // 切换页码
    dianji(pi) {
      this.pageIndex = pi;
      this.getpinlun();
    },
    // 更爱页数
    newpageS(size) {
      this.pageSize = size;
      this.getpinlun();
    },
    // 文件上传成功的钩子
    chengong(res, file, fileList) {
      // console.log("res", res);
      // console.log("file", file);
      // console.log("fileList", fileList);
      this.pics.push(res[0]);
    },
    // 获取回复id
    getPLId(item) {
      console.log("得到的", item);
      this.followid = item[0];
      this.nickname = item[1];
      this.$refs.textinpu.focus();
      // console.log("获取到的id", id);
    },
    // 提交评论
    tijiaobut() {
      console.log(this.textarea);
      console.log(this.pics);
      // 判断不能都为空
      if (!this.textarea && this.pics.length == 0)
        return this.$message.error("不能发表空评论");

      // 定义一个对象存放参数
      let newData = {
        content: this.textarea,
        pics: this.pics,
        post: this.$route.query.id,
      };

      // 如果有回复的id  就拼接上参数
      if (this.followid) {
        newData.follow = this.followid;
      }
      // axios评论发表请求
      this.$axios({
        url: "comments",
        method: "post",
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
          Authorization: "Bearer " + this.$store.state.user.userInfo.token,
        },
        data: newData,
      }).then((res) => {
        console.log(res.data);
        this.$message.success("提交成功");
        // 从新加载评论
        this.getpinlun();
        // 清空数据
        this.textarea = "";
        // 清空上传图片的方法
        this.$refs.upload.clearFiles();
        this.followid = "";
      });
    },
    // 点击回复名 的X 图标
    delhuifu() {
      this.followid = "";
      this.nickname = "";
    },

    // 输入框获取焦点判断是否已近登陆
    istoken() {
      if (!this.$store.state.user.userInfo.token) {
        this.isshowinout = true;
        this.$message.error("未登陆");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.detailbox {
  max-width: 1000px;
  min-width: 920px;
  margin: 0 auto;
  padding-top: 20px;
}
.detailData {
  h1 {
    padding: 20px 0;
    font-size: 32px;
    color: #000;
    border-bottom: 1px solid #ccc;
  }
  .date {
    // width: 100%;
    padding: 20px;
    color: #999;
    overflow: hidden;
    span {
      float: right;
      i {
        &:first-child {
          margin-right: 10px;
        }
      }
    }
  }
  .contentbox {
    width: 100%;
    overflow: hidden;
    /deep/ img {
      max-width: 700px;
      object-fit: cover;
    }
  }
}
.icon {
  padding: 50px 0 30px 0;
  text-align: center;
  cursor: pointer;

  i {
    font-size: 28px;
    color: orange;
    margin: 0 15px;
  }
  .icon-text {
    margin-top: 10px;
    font-size: 14px;
    color: #999;
  }
}
.pinlunbox {
  .pinlun {
    font-size: 18px;
    margin-bottom: 15px;
  }
  .nicknamebox {
    margin-bottom: 15px;
    .namebox {
      border: 1px solid #ccc;
      font-size: 12px;
      color: #999;
      padding: 5px;
      border-radius: 5px;
      background-color: rgba(144, 147, 153, 0.1);
      .el-icon-close {
        margin-left: 10px;
        cursor: pointer;
      }
    }
  }
  .shanchuan {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    .wenjian {
      flex: 1;
      /deep/.el-upload--picture-card {
        width: 100px;
        height: 100px;
        line-height: 100px;
      }
    }
  }
}
.pLlist {
  border: 1px solid #ccc;
  // padding: 20px;
  margin-top: 30px;
}
.fenye {
  margin: 10px 0;
  text-align: center;
}
.gonlue {
  h4 {
    font-size: 20px;
    font-weight: 400;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
  }
}
/deep/.el-upload {
  width: 100px;
  height: 100px;
  line-height: 100px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item {
  width: 100px;
  height: 100px;
  line-height: 100px;
}
</style>